<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

// 注册组件
const props = defineProps<{
  users: { username: string; password: string; createdAt: number }[]
  errorMsg: string
}>()

const emit = defineEmits<{
  (e: 'registerSuccess'): void
  (e: 'toLogin'): void
  (e: 'clearError'): void
  (e: 'addUser', user: { username: string; password: string; createdAt: number }): void
  (e: 'setError', msg: string, isSuccess?: boolean): void
}>()

const registerForm = ref({ username: 'aaa', password: '123456', confirmPwd: '123456' })

const handleRegister = () => {
  emit('clearError')
  const { username, password, confirmPwd } = registerForm.value
  const trimedName = username.trim()
  const trimedPwd = password.trim()

  if (!trimedName) { emit('setError', '用户名不能为空！'); return }
  if (trimedName.length < 3 || trimedName.length > 12) { emit('setError', '用户名长度需在3-12位之间！'); return }
  if (!trimedPwd) { emit('setError', '密码不能为空！'); return }
  if (trimedPwd.length < 6) { emit('setError', '密码长度不能少于6位！'); return }
  if (trimedPwd !== confirmPwd) { emit('setError', '两次输入的密码不一致！'); return }
  if (props.users.some(u => u.username === trimedName)) { emit('setError', '该用户名已被注册！'); return }

  const newUser = {
    username: trimedName,
    password: trimedPwd,
    createdAt: Date.now()
  }
  emit('addUser', newUser)
  registerForm.value = { username: '', password: '', confirmPwd: '' } 
  
  emit('setError', '注册成功！即将跳转到登录页...', true)
  setTimeout(() => emit('registerSuccess'), 1500)
}
</script>

<template>
  <div class="auth-page">
    <div class="auth-card">
      <div class="auth-icon">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14"/>
          <path d="M5 12h14"/>
        </svg>
      </div>
      <h2 class="auth-title">创建新账号</h2>
      <div class="auth-form">
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input
            type="text"
            class="form-input"
            v-model="registerForm.username"
            placeholder="3-12位字符，唯一标识"
            autocomplete="off"
            @focus="emit('clearError')"
          />
        </div>
        <div class="form-group">
          <label class="form-label">密码</label>
          <input
            type="password"
            class="form-input"
            v-model="registerForm.password"
            placeholder="至少6位字符"
            @focus="emit('clearError')"
          />
        </div>
        <div class="form-group">
          <label class="form-label">确认密码</label>
          <input
            type="password"
            class="form-input"
            v-model="registerForm.confirmPwd"
            placeholder="再次输入密码"
            @focus="emit('clearError')"
          />
        </div>
        <p class="error-msg" v-if="errorMsg" :class="{ 'success-msg': errorMsg.includes('成功') }">{{ errorMsg }}</p>
        <div class="auth-btns">
          <button class="auth-btn primary" @click="handleRegister">注册</button>
          <div class="auth-switch">
            已有账号？
            <button class="auth-link" @click="emit('toLogin')">去登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>